<template>
  <div class="page">
    <HeaderCard :title="'恒邦能源数据综合分析'" />
    <div class="content-box">
      <div class="left-box">
        <BaseCardBaseCard title="当日能耗">
          <div class="day-box" v-loading="loadingLeftTop">
            <div class="day-card-list" v-for="(item, index) in leftTopList" :key="index">
              <div class="day-card-box">
                <div class="day-img-box">
                  <img :src="leftTopIcon[index]" />
                </div>
                <div class="day-font-box">
                  <div class="day-num-unit-box">
                    <span class="num">{{ item.count }}</span>
                    <span class="unit">{{ item.energyUnit }}</span>
                  </div>
                  <div class="day-font">{{ item.energyName }}</div>
                </div>
              </div>
            </div>
          </div>
        </BaseCardBaseCard>
        <BaseCardBaseCard title="同环比分析" :tabArray="period" @changeActive="getLeftCenterList">
          <div class="left-analysis-box" v-loading="loadingLeftCenter">
            <div class="analysis-top-content">
              <div class="analysis-title-box">
                <span class="analysis-num-span">
                  {{ leftCenterList[0].count }}
                </span>
                <span class="analysis-unit-span">{{
                  leftCenterList[0].energyUnit
                }}</span>
              </div>
              <div class="analysis-img-box">
                <img src="@/assets/images/energy/left/center/icon01.png" />
              </div>
              <div class="analysis-title-span">本月当前耗电量</div>
            </div>
            <div class="analysis-bottom-content">
              <div class="analysis-left-box">
                <div class="analysis-bottom-img-box">
                  <img src="@/assets/images/energy/left/center/icon02.png" />
                </div>
                <div class="analysis-bottom-font-box">
                  <div class="top-font">同期耗电量</div>
                  <div class="bottom-font">
                    <span class="num-span">222</span>
                    <span class="unit-span">{{
                      leftCenterList[0].energyUnit
                    }}</span>
                  </div>
                </div>
              </div>
              <div class="analysis-right-box">
                <div class="right-top-box">
                  <div class="icon-box icon-box1"></div>
                  <div class="font-box">同比增长</div>
                </div>
                <div class="right-bottom-box">
                  <div class="font-box green">
                    {{ leftCenterList[0].tongbi }}%
                  </div>
                  <div class="icon-box icon-box2"></div>
                </div>
              </div>
              <div class="analysis-right-box">
                <div class="right-top-box">
                  <div class="icon-box icon-box3"></div>
                  <div class="font-box">环比增长</div>
                </div>
                <div class="right-bottom-box">
                  <div class="font-box orange">
                    {{ leftCenterList[0].huanbi }}%
                  </div>
                  <div class="icon-box icon-box4"></div>
                </div>
              </div>
            </div>
          </div>
        </BaseCardBaseCard>
        <BaseCardBaseCard title="耗电占比">
          <div class="left-analysis-box" v-loading="loadingLeftBottom">
            <div id="leftBottom" style="width: 100%; height: 100%" />
          </div>
        </BaseCardBaseCard>
      </div>
      <div class="center-box">
        <div class="center-image-box" v-loading="loadingCenterTopCenter">
          <div class="image-box">
            <div class="img-ul-box">
              <div class="img-li-box" v-for="(item, index) in centerTopList" :key="index">
                <div class="icon-ul-box">
                  <img :src="item.icon" />
                </div>
                <div class="font-ul-box" :class="item.className">
                  <div class="font-li-box1">{{ item.number }}</div>
                  <div class="font-li-box2">{{ item.name }}</div>
                </div>
              </div>
            </div>
            <div class="absolute-box" :class="item.className" v-for="(item, index) in centerCenterList" :key="index">
              <dl>
                <dd>
                  厂区名称：<span class="blue"> {{ item.nodeName }}</span>
                </dd>
                <dd v-for="child in item.energyItemList">
                  {{ child.energyName }}：<span class="blue">
                    {{ child.count }}</span>
                </dd>
              </dl>
            </div>
          </div>
        </div>
        <BaseCardBaseCard title="用电趋势分析" :tabArray="period" @changeActive="getCenterBottomList">
          <div class="line-box" v-loading="loadingCenterBottom">
            <div id="centerBottom" style="width: 100%; height: 100%" />
          </div>
        </BaseCardBaseCard>
      </div>
      <div class="right-box">
        <BaseCardBaseCard title="能源购入与消耗对比">
          <div class="bar-box" v-loading="loadingRightTop">
            <div id="rightTop" style="width: 100%; height: 100%" />
          </div>
        </BaseCardBaseCard>
        <BaseCardBaseCard title="能耗排名">
          <div class="rank-box" v-loading="loadingRightCenter">
            <div class="rank-ul-box" v-for="(item, index) in rightCenterList" :key="i">
              <div class="rank-li-box">
                <div class="rank-icon-box" :style="{
                  backgroundImage: 'url(' + rightCenterIcon[index] + ')',
                  backgroundSize: '100% 100%',
                }" />
                <div class="rank-name-box">{{ item.nodeName }}</div>
                <div class="rank-num-box">{{ item.energyConsumption }}</div>
              </div>
            </div>
          </div>
        </BaseCardBaseCard>
        <BaseCardBaseCard title="能源成本占比">
          <div class="pie-box" v-loading="loadingRightBottom">
            <div id="rightBottom" style="width: 100%; height: 100%"></div>
          </div>
        </BaseCardBaseCard>
      </div>
    </div>
  </div>
</template>

<script setup name="energy">
import {
  listDay,
  listEnergyConsumptionSummation,
  listPeakValley,
  listFactoryEnergyConsumption,
  listSegmentAnalysisYear,
  listSegmentAnalysisMonth,
  listSegmentAnalysisDay,
  listPurchaseConsumption,
  listEnergyConsumptionRanking,
  listCostProp,
} from "@/api/energy/energy";
import useAppStore from "@/store/modules/app";
const appStore = useAppStore();
appStore.toggleSideBarHide(true);
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const { period } = proxy.useDict("period");
import useSettingsStore from "@/store/modules/settings";
const settingsStore = useSettingsStore();
let loadingLeftTop = ref(false);
let loadingLeftCenter = ref(false);
let loadingLeftBottom = ref(false);
let loadingCenterTopCenter = ref(false);
let loadingCenterBottom = ref(false);
let loadingRightTop = ref(false);
let loadingRightCenter = ref(false);
let loadingRightBottom = ref(false);
import left_top_icon1 from "@/assets/images/energy/left/top/icon1.png";
import left_top_icon2 from "@/assets/images/energy/left/top/icon2.png";
import left_top_icon3 from "@/assets/images/energy/left/top/icon3.png";
import left_top_icon4 from "@/assets/images/energy/left/top/icon4.png";
let leftTopIcon = ref([
  left_top_icon1,
  left_top_icon2,
  left_top_icon3,
  left_top_icon4,
]);
let leftTopList = ref([]);
import pieBg from "@/assets/images/energy/left/bottom/pie-bg.png";
let leftCenterList = ref([
  {
    energyName: "电",
    energyUnit: "千瓦",
    count: 0,
    tongbi: 0,
    huanbi: 0,
    coefficient: 0,
    tonCount: 0,
  },
]);
import centerIcon1 from "@/assets/images/energy/center/icon1.png";
import centerIcon2 from "@/assets/images/energy/center/icon2.png";
import centerIcon3 from "@/assets/images/energy/center/icon3.png";
import centerIcon4 from "@/assets/images/energy/center/icon4.png";
let centerTopList = ref([
  {
    name: "本月综合能耗",
    number: 0,
    icon: centerIcon1,
    className: "icon-font-box1",
  },
  {
    name: "本月能耗费用",
    number: 0,
    icon: centerIcon2,
    className: "icon-font-box2",
  },
  {
    name: "本月碳排放",
    number: 0,
    icon: centerIcon3,
    className: "icon-font-box3",
  },
  {
    name: "本月用能完成指标",
    number: 0,
    icon: centerIcon4,
    className: "icon-font-box4",
  },
]);
let centerCenterList = ref([]);
import rankIcon01 from "@/assets/images/energy/right/center/icon1.png";
import rankIcon02 from "@/assets/images/energy/right/center/icon2.png";
import rankIcon03 from "@/assets/images/energy/right/center/icon3.png";
import rankIcon04 from "@/assets/images/energy/right/center/icon4.png";
import rankIcon05 from "@/assets/images/energy/right/center/icon5.png";
import rankIcon06 from "@/assets/images/energy/right/center/icon6.png";
import rankIcon07 from "@/assets/images/energy/right/center/icon7.png";
import rankIcon08 from "@/assets/images/energy/right/center/icon8.png";
import rankIcon09 from "@/assets/images/energy/right/center/icon9.png";
import rankIcon10 from "@/assets/images/energy/right/center/icon10.png";
let rightCenterIcon = ref([
  rankIcon01,
  rankIcon02,
  rankIcon03,
  rankIcon04,
  rankIcon05,
  rankIcon06,
  rankIcon07,
  rankIcon08,
  rankIcon09,
  rankIcon10,
]);
let rightCenterList = ref([]);
function getLeftTopList() {
  loadingLeftTop.value = true;
  listDay().then((res) => {
    loadingLeftTop.value = false;
    if (!!res.code && res.code == 200) {
      res.data.map((item, index) => {
        item.icon = "left_top_icon" + (index + 1);
      });
      if (res.data.length < 4) {
        for (let index = 0; index < 3; index++) {
          res.data.push({
            energyName: null,
            count: 0,
            energyUnit: null,
          });
        }
      }
      leftTopList.value = res.data;
    }
  });
}
function getLeftCenterList(e) {
  loadingLeftCenter.value = true;
  listEnergyConsumptionSummation({
    timeType: e,
  }).then((res) => {
    loadingLeftCenter.value = false;
    if (!!res.code && res.code == 200) {
      leftCenterList.value = res.data;
    }
  });
}
function getLeftBottomList() {
  loadingLeftBottom.value = true;
  listPeakValley().then((res) => {
    loadingLeftBottom.value = false;
    if (!!res.code && res.code == 200) {
      // 在初始化之前，先dispose旧的实例
      if (echarts.getInstanceByDom(document.getElementById("leftBottom"))) {
        echarts.dispose(document.getElementById("leftBottom"));
      }
      const leftBottom = echarts.init(document.getElementById("leftBottom"));
      let total = 0;
      let seriesData = [];
      if (!!res.data && res.data.length > 0) {
        res.data.map((item) => {
          total += Number(item.count);
          seriesData.push({
            name: item.timeName,
            value: Number(item.count).toFixed(2),
          });
        });
      }
      setTimeout(() => {
        leftBottom.setOption({
          color: ["#02FF7F", "#FF7723", "#8E30FF", "#0ff1ff"],
          grid: {
            top: "20%",
            left: "15%",
            right: "5%",
            bottom: "100",
            containLabel: true,
          },
          tooltip: {
            trigger: "item",
          },
          graphic: [
            {
              type: "image", //添加图片
              style: {
                //设置图片样式
                image: pieBg,
                width: 150,
                height: 150,
              },
              left: "center",
              bottom: "center",
            },
          ],
          series: [
            {
              name: "耗电占比",
              type: "pie",
              center: ["50%", "50%"],
              radius: ["40", "55"],
              avoidLabelOverlap: false,
              label: {
                fontFamily: "Microsoft YaHei",
                fontWeight: 400,
                formatter: "{c|{c}kw} {d|{d}%}\n{b|{b}}",
                rich: {
                  b: {
                    fontSize: 10,
                    color: "#FFFFFF",
                    opacity: "0.8",
                  },
                  c: {
                    color: "auto",
                    fontSize: 13,
                  },
                  d: {
                    color: "auto",
                    fontSize: 13,
                  },
                },
              },
              labelLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                },
                length: 20,
                length2: 10,
              },
              data: seriesData,
            },
          ],
        });
      }, 100);
      window.addEventListener(
        "resize",
        () => {
          leftBottom.resize();
        },
        { passive: true }
      );
    }
  });
}
function getCenterTopList() {
  loadingCenterTopCenter.value = true;
  listFactoryEnergyConsumption().then((res) => {
    loadingCenterTopCenter.value = false;
    if (!!res.code && res.code == 200) {
      if (!!res.data) {
        centerTopList.value[0].number = !!res.data.monthConsumption
          ? res.data.monthConsumption
          : 0;
        centerTopList.value[1].number = !!res.data.monthEnergyAmount
          ? res.data.monthEnergyAmount
          : 0;
        centerTopList.value[2].number = !!res.data.cemission
          ? res.data.cemission
          : 0;
        centerTopList.value[3].number = !!res.data.useEnergyIndex
          ? res.data.useEnergyIndex
          : 0;
        if (!!res.data.itemVoList) {
          if (res.data.itemVoList.length < 5) {
            for (let index = 0; index < 5; index++) {
              res.data.itemVoList.push({ nodeName: "暂无数据" });
            }
            res.data.itemVoList.map((item, index) => {
              item.className = "absolute" + (index + 1);
            });
          }
        }
        centerCenterList.value = !!res.data.itemVoList
          ? res.data.itemVoList
          : [];
      }
    }
  });
}
function getCenterBottomList(e) {
  loadingCenterBottom.value = true;
  let xdata = [];
  let series = [
    {
      name: "尖",
      type: "bar",
      stack: "total",
      barWidth: "18",
      data: [],
    },
    {
      name: "峰",
      type: "bar",
      stack: "total",
      barWidth: "18",
      data: [],
    },
    {
      name: "平",
      type: "bar",
      stack: "total",
      barWidth: "18",
      data: [],
    },
    {
      name: "谷",
      type: "bar",
      stack: "total",
      barWidth: "18",
      data: [],
    },
  ];
  if (e == "DAY") {
    listSegmentAnalysisDay().then((res) => {
      loadingCenterBottom.value = false;
      if (!!res.code && res.code == 200) {
        if (!!res.data.lineChat) {
          res.data.lineChat.map((item) => {
            xdata.push(proxy.dayjs(item.xdata).format("HH时"));
            series[0].data.push(!!item.ytip ? item.ytip : 0);
            series[1].data.push(!!item.ypeak ? item.ypeak : 0);
            series[2].data.push(!!item.yflat ? item.yflat : 0);
            series[3].data.push(!!item.ytrough ? item.ytrough : 0);
          });
          getCenterBottomListEchsrts(xdata, series);
        }
      }
    });
  } else if (e == "MONTH") {
    listSegmentAnalysisMonth().then((res) => {
      loadingCenterBottom.value = false;
      if (!!res.code && res.code == 200) {
        if (!!res.data.costList) {
          res.data.costList.map((item) => {
            xdata.push(proxy.dayjs(item.xdata).format("DD日"));
            series[0].data.push(!!item.ytip ? item.ytip : 0);
            series[1].data.push(!!item.ypeak ? item.ypeak : 0);
            series[2].data.push(!!item.yflat ? item.yflat : 0);
            series[3].data.push(!!item.ytrough ? item.ytrough : 0);
          });
          getCenterBottomListEchsrts(xdata, series);
        }
      }
    });
  } else {
    listSegmentAnalysisYear().then((res) => {
      loadingCenterBottom.value = false;
      if (!!res.code && res.code == 200) {
        if (!!res.data.costList) {
          res.data.costList.map((item) => {
            xdata.push(proxy.dayjs(item.xdata).format("MM月"));
            series[0].data.push(!!item.ytip ? item.ytip : 0);
            series[1].data.push(!!item.ypeak ? item.ypeak : 0);
            series[2].data.push(!!item.yflat ? item.yflat : 0);
            series[3].data.push(!!item.ytrough ? item.ytrough : 0);
          });
          getCenterBottomListEchsrts(xdata, series);
        }
      }
    });
  }
}
function getCenterBottomListEchsrts(xdata, series) {
  console.log(xdata, series);
  // 在初始化之前，先dispose旧的实例
  if (echarts.getInstanceByDom(document.getElementById("centerBottom"))) {
    echarts.dispose(document.getElementById("centerBottom"));
  }
  const centerBottom = echarts.init(document.getElementById("centerBottom"));
  setTimeout(() => {
    centerBottom.setOption({
      color: ["#02FF7F", "#D48144", "#8E30FF", "#00B5EC"],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
      },
      legend: {
        top: 5,
        left: "5%",
        // icon: "circle",
        // itemWidth: 14,
        itemHeight: 10,
        textStyle: {
          color: "#CCE9FF",
          fontSize: 10,
        },
      },
      grid: {
        top: "55",
        left: "45",
        right: "45",
        bottom: "20",
        containLabel: true,
      },
      xAxis: {
        type: "category",
        axisPointer: {
          type: "shadow",
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#0F4884",
          },
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: "#0E87F9",
          fontSize: 12,
          padding: [5, 0, 0, 0],
          //   formatter: '{value} ml'
        },
        data: xdata,
      },
      yAxis: [
        {
          type: "value",
          name: "kw",
          nameTextStyle: {
            color: "#0E87F9",
            fontSize: 12,
            padding: [10, 0, 0, 0],
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "rgba(80, 254, 193,0.2)",
            },
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            color: "#0E87F9",
            fontSize: 12,
          },
        },
      ],
      series,
    });
  }, 100);
  window.addEventListener(
    "resize",
    () => {
      centerBottom.resize();
    },
    { passive: true }
  );
}
function getRightTopList() {
  loadingRightTop.value = true;
  listPurchaseConsumption().then((res) => {
    loadingRightTop.value = false;
    if (!!res.code && res.code == 200) {
      // 在初始化之前，先dispose旧的实例
      if (echarts.getInstanceByDom(document.getElementById("rightTop"))) {
        echarts.dispose(document.getElementById("rightTop"));
      }
      const rightTop = echarts.init(document.getElementById("rightTop"));
      let xdata = [];
      let purchaseSum = [];
      let consumptionSum = [];
      if (!!res.data && res.data.length > 0) {
        res.data.map((item) => {
          xdata.push(item.energyName);
          purchaseSum.push(item.purchaseSum);
          consumptionSum.push(item.consumptionSum);
        });
      }
      setTimeout(() => {
        rightTop.setOption({
          color: ["#008FF2", "#F2C200"],
          tooltip: {
            trigger: "item",
          },
          legend: {
            padding: [10, 0, 0, 0],
            icon: "rect",
            itemWidth: 20,
            itemGap: 40,
            itemHeight: 7,
            align: "right",
            textStyle: {
              color: "#CCE9FF",
              fontSize: 10,
            },
          },
          grid: [
            // 左侧边框
            {
              show: false,
              left: "7%",
              top: "30",
              bottom: "45",
              containLabel: false,
              width: "37%",
            },
            // 中间文字边框
            {
              show: false,
              left: "52%",
              top: "30",
              bottom: "45",
              containLabel: false,
              width: "26%",
            },
            // 右侧边框
            {
              show: false,
              right: "7%",
              top: "30",
              bottom: "45",
              containLabel: false,
              width: "37%",
            },
          ],
          xAxis: [
            {
              gridIndex: 0,
              type: "value",
              triggerEvent: true,
              // 翻转
              name: "单位：千元",
              nameLocation: "middle",
              nameTextStyle: {
                fontSize: 10,
                padding: [10, 100, 0, 0],
                verticalAlign: "top",
                color: "#B5C6ED",
              },
              inverse: true,
              axisLine: {
                show: false,
                lineStyle: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#CCE9FF"
                      : "#222222",
                },
              },
              axisTick: {
                show: false,
              },
              position: "bottom",
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#B5C6ED",
                  fontWeight: "bold",
                  fontSize: 10,
                },
              },
              splitLine: {
                show: false,
              },
            },
            {
              gridIndex: 1,
              show: false,
            },
            {
              gridIndex: 2,
              triggerEvent: true,
              type: "value",
              name: "单位：千元",
              nameLocation: "top",
              nameTextStyle: {
                fontSize: 10,
                padding: [25, 0, 0, 25],
                verticalAlign: "top",
                color: "#B5C6ED",
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: "#CCE9FF",
                },
              },
              axisTick: {
                show: false,
              },
              position: "bottom",
              axisLabel: {
                textStyle: {
                  color: "#B5C6ED",
                  fontWeight: "bold",
                  fontSize: 10,
                },
              },
              splitLine: {
                show: false,
              },
            },
          ],
          yAxis: [
            {
              gridIndex: 0,
              type: "category",
              inverse: true,
              position: "right",
              axisLine: {
                show: false,
                lineStyle: {
                  width: 1,
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#CCE9FF"
                      : "#222222",
                },
              },
              axisTick: {
                show: false,
              },

              axisLabel: {
                show: false,
                textStyle: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#CCE9FF"
                      : "#222222",
                  fontSize: 14,
                },
              },
              data: xdata,
            },
            {
              gridIndex: 1,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#CCE9FF"
                      : "#222222",
                  fontSize: 10,
                },
              },
              data: xdata.map((value) => {
                return {
                  value: value,
                  textStyle: {
                    color: "#CCE9FF",
                    align: "center",
                    top: "center",
                  },
                };
              }),
            },
            {
              gridIndex: 2,
              type: "category",
              inverse: true,
              position: "left",
              axisLine: {
                show: false,
                lineStyle: {
                  width: 1,
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#CCE9FF"
                      : "#222222",
                },
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                show: false,
                textStyle: {
                  color:
                    settingsStore.sideTheme == "theme-dark"
                      ? "#CCE9FF"
                      : "#222222",
                  fontSize: 14,
                },
              },
              data: xdata,
            },
          ],
          series: [
            // 左边
            {
              name: "购入",
              type: "bar",
              xAxisIndex: 0,
              yAxisIndex: 0,
              barWidth: 6,
              // 左侧数据
              data: purchaseSum,
              label: {
                show: true,
                position: "left",
                textStyle: {
                  color: "#00F6FF",
                  fontSize: 9,
                },
              },
              itemStyle: {
                emphasis: {
                  barBorderRadius: 7,
                },
                normal: {
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: "#008EF2" },
                    { offset: 1, color: "#63B4ED" },
                  ]),
                },
              },
            },
            // 右边
            {
              name: "消耗",
              type: "bar",
              xAxisIndex: 2,
              yAxisIndex: 2,
              barWidth: 6,
              label: {
                show: true,
                position: "right",
                textStyle: {
                  color: "#FFF600",
                  fontSize: 9,
                },
              },
              // 左侧数据
              data: consumptionSum,
              itemStyle: {
                emphasis: {
                  barBorderRadius: 7,
                },
                normal: {
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    { offset: 0, color: "#F3F69E" },
                    { offset: 1, color: "#F2C200" },
                  ]),
                },
              },
            },
          ],
        });
      }, 100);
      window.addEventListener(
        "resize",
        () => {
          rightTop.resize();
        },
        { passive: true }
      );
    }
  });
}
function getRightCenterList() {
  loadingRightCenter.value = true;
  listEnergyConsumptionRanking().then((res) => {
    loadingRightCenter.value = false;
    if (!!res.code && res.code == 200) {
      rightCenterList.value =
        res.data.length > 0
          ? res.data
          : [
            { nodeName: "暂无数据", energyConsumption: 0 },
            { nodeName: "暂无数据", energyConsumption: 0 },
            { nodeName: "暂无数据", energyConsumption: 0 },
            { nodeName: "暂无数据", energyConsumption: 0 },
            { nodeName: "暂无数据", energyConsumption: 0 },
            { nodeName: "暂无数据", energyConsumption: 0 },
            { nodeName: "暂无数据", energyConsumption: 0 },
            { nodeName: "暂无数据", energyConsumption: 0 },
            { nodeName: "暂无数据", energyConsumption: 0 },
            { nodeName: "暂无数据", energyConsumption: 0 },
          ];
      console.log(rightCenterList.value, res.data);
    }
  });
}
function getRightBottomList() {
  loadingRightBottom.value = true;
  listCostProp().then((res) => {
    loadingRightBottom.value = false;
    if (!!res.code && res.code == 200) {
      // 在初始化之前，先dispose旧的实例
      if (echarts.getInstanceByDom(document.getElementById("rightBottom"))) {
        echarts.dispose(document.getElementById("rightBottom"));
      }
      const rightBottom = echarts.init(document.getElementById("rightBottom"));
      let total = 0;
      let seriesData = [];
      if (!!res.data && res.data.length > 0) {
        res.data.map((item) => {
          total += Number(item.count);
          seriesData.push({
            name: item.energyName,
            value: Number(item.consumptionSum).toFixed(2),
          });
        });
      }
      setTimeout(() => {
        rightBottom.setOption({
          color: ["#00d1d4", "#215dd4", "#d7c933", "#9955ff"],
          grid: {
            top: "20%",
            left: "15%",
            right: "5%",
            bottom: "0%",
            containLabel: true,
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            top: "center",
            icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
            right: "27",
            itemWidth: 14,
            itemHeight: 14,
            itemGap: 20,
            textStyle: {
              align: "left",
              verticalAlign: "middle",
              color: "auto",
              fontSize: 10,
              fontFamily: "DIN",
              fontWeight: "bold",
            },
            data: seriesData,
            formatter: (name) => {
              let value, percent;
              for (let i = 0; i < seriesData.length; i++) {
                if (seriesData[i].name === name) {
                  value = seriesData[i].value;
                  percent =
                    total != 0 && value != 0
                      ? ((value / total) * 100).toFixed(2)
                      : 0;
                }
              }
              return `${name}  ${value}万  ${percent}%`;
            },
          },
          series: [
            {
              name: "能源成本占比",
              type: "pie",
              center: ["35%", "50%"],
              radius: ["30%", "70%"],
              avoidLabelOverlap: false,
              roseType: "radius",
              label: false,
              data: seriesData,
            },
          ],
        });
      }, 100);
      window.addEventListener(
        "resize",
        () => {
          rightBottom.resize();
        },
        { passive: true }
      );
    }
  });
}
onMounted(() => {
  getLeftTopList();
  getLeftBottomList();
  getCenterTopList();
  getRightTopList();
  getRightCenterList();
  getRightBottomList();
});
</script>
<style scoped lang="scss">
.page {
  height: 100vh;
  width: 100vw;
  background: url("@/assets/images/energy/energy_bg.png") no-repeat;
  background-size: cover;
  background-position: center bottom;

  .content-box {
    margin: 0;
    position: absolute;
    top: 8.7037vh;
    left: 0;
    z-index: 1;
    display: flex;

    .left-box {
      margin-left: 2.0834vw;
      width: 21.875vw;

      .day-box {
        height: 23.7963vh;
        padding-top: 1.6667vh;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-left: 1.0938vw;

        .day-card-list {
          width: 50%;
          color: #fff;
          margin-bottom: 2.963vh;

          .day-card-box {
            display: flex;
            align-items: center;

            .day-img-box {
              width: 4.375vw;
              height: 8.1481vh;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .day-font-box {
              margin-left: 0.6771vw;

              .day-num-unit-box {
                font-family: OPPOSans;
                font-weight: bold;
                color: #ffb400;
                margin-bottom: 1vh;

                .num {
                  font-size: 1.1979vw;
                }

                .unit {
                  font-size: 0.6771vw;
                }
              }

              .day-font {
                font-family: Source Han Sans CN;
                font-size: 0.7292vw;
                color: #8fcfee;
              }
            }
          }
        }
      }

      .left-analysis-box {
        width: 100%;
        height: 23.7037vh; //420*256

        .analysis-top-content {
          text-align: center;
          margin: 0 auto; //29px  33px
          padding-top: 2.6852vh;
          height: 16.9444vh;
          box-sizing: border-box;

          .analysis-title-box {
            font-family: DINPro;
            color: #ffb400;
            margin-bottom: 0.8333vh;
            font-style: italic;

            .analysis-num-span {
              font-weight: bold;
              font-size: 1.1458vw; // 22px;
            }

            .analysis-unit-span {
              font-size: 0.8854vw; // 17px;}
            }
          }

          .analysis-img-box {
            width: 5.9896vw; //115* 83
            height: 7.6852vh;
            margin: 0 auto;

            img {
              height: 100%;
            }
          }

          .analysis-title-span {
            font-family: Source Han Sans CN;
            font-weight: 500;
            font-size: 0.625vw; //12px;
            color: #c3a873;
            letter-spacing: 1px;
            font-weight: bold;
          }
        }

        .analysis-bottom-content {
          display: flex;
          justify-content: space-around;
          align-content: center;
          height: 5.0926vh;

          .analysis-left-box {
            display: flex;

            .analysis-bottom-img-box {
              width: 3.9063vw; //75
              height: 5.0926vh; //55
              margin-right: 0.5208vw; //10

              img {
                // height: 100%;
                width: 100%;
              }
            }

            .analysis-bottom-font-box {
              font-weight: bolder;
              padding-top: 0.8333vh;

              .top-font {
                // margin-bottom: 0.8333vh;
                font-size: 0.625vw; //12px;
                color: #02d9fd;
              }

              .bottom-font {
                color: #ffffff;
                font-family: DIN;

                .num-span {
                  font-size: 1.0938vw; //21px;}
                }

                .unit-span {
                  font-size: 0.7292vw; //14px
                }
              }
            }
          }

          .analysis-right-box {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding-top: 0.8333vh;

            .right-top-box {
              margin-bottom: 0.7407vh;
              display: flex;
              justify-content: center;

              .icon-box {
                width: 0.625vw;
                height: 1.1111vh;
                margin-right: 0.7407vh;
                min-width: 12px;
                min-height: 12px;

                img {
                  height: 100%;
                  width: 100%;
                }
              }

              .font-box {
                font-family: Source Han Sans SC;
                font-size: 0.5208vw; // 10px;
                color: #527fb5;
              }
            }

            .right-bottom-box {
              display: flex;
              justify-content: center;
              align-items: center;

              .font-box {
                font-family: Arial;
                font-size: 0.6771vw; // 13px;
              }

              .green {
                color: #23c222;
              }

              .orange {
                color: #f8813d;
              }

              .icon-box {
                width: 0.3125vw;
                height: 0.7407vh;
                margin-left: 0.8333vh;

                img {
                  height: 100%;
                  width: 100%;
                }
              }
            }

            .icon-box1 {
              background: url("@/assets/images/energy/left/center/icon03.png") no-repeat;
              background-size: 100% 100%;
              background-position: center;
            }

            .icon-box2 {
              background: url("@/assets/images/energy/left/center/icon05.png") no-repeat;
              background-size: 100% 100%;
              background-position: center;
            }

            .icon-box3 {
              background: url("@/assets/images/energy/left/center/icon04.png") no-repeat;
              background-size: 100% 100%;
              background-position: center;
            }

            .icon-box4 {
              background: url("@/assets/images/energy/left/center/icon06.png") no-repeat;
              background-size: 100% 100%;
              background-position: center;
            }
          }
        }
      }
    }

    .center-box {
      margin: 0 0.8333vw;
      width: 50.2083vw;

      .center-image-box {
        width: 100%;
        height: 56.5741vh; //56.2037vh;
        border: 1px solid;
        border-image: linear-gradient(0deg, #0a3c86, #000) 1;
        background: linear-gradient(0deg,
            rgba(18, 111, 216, 0.2) 0%,
            rgba(18, 111, 216, 0) 100%);
        border-top: 0;
        margin-bottom: 1.2963vh;

        .image-box {
          height: 100%;
          padding-top: 1.8519vh;
          background: url("@/assets/images/energy/center/bg1.png");
          background-size: cover;
          background-position: center;
          box-sizing: border-box;
          position: relative;

          .img-ul-box {
            margin: 0 2.1354vw 0 3.8021vw;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .img-li-box {
              display: flex;
              align-items: center;

              .icon-ul-box {
                width: 3.6458vw;
                height: 3.6458vw;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .font-ul-box {
                margin-left: 0.3125vw;

                .font-li-box1 {
                  font-family: OPPOSans;
                  font-weight: 800;
                  font-size: 1.3542vw; //26px;
                }

                .font-li-box2 {
                  font-family: Source Han Sans CN;
                  font-weight: 400;
                  font-size: 0.6771vw; //13px;
                }
              }

              .icon-font-box1 {
                .font-li-box1 {
                  background: linear-gradient(0deg, #1bc0fd 0%, #1eeaf1 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }

                .font-li-box2 {
                  color: #8be7ff;
                }
              }

              .icon-font-box2 {
                .font-li-box1 {
                  background: linear-gradient(0deg, #f5ab0c 0%, #ffe056 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }

                .font-li-box2 {
                  color: #feea92;
                }
              }

              .icon-font-box3 {
                .font-li-box1 {
                  background: linear-gradient(0deg, #8d1bf7 0%, #bd76ff 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }

                .font-li-box2 {
                  color: #cd9cff;
                }
              }

              .icon-font-box4 {
                .font-li-box1 {
                  background: linear-gradient(0deg, #0ccb42 0%, #2bfda6 100%);
                  -webkit-background-clip: text;
                  -webkit-text-fill-color: transparent;
                }

                .font-li-box2 {
                  color: #96efc3;
                }
              }
            }
          }

          .absolute-box {
            width: 8.4896vw; //163* 189
            height: 14.9074vh;
            background-image: url("@/assets/images/energy/center/bg2.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-position: center;

            dl {
              // padding: 0.4630vh 0;
              height: 10.5556vh;
              display: flex;
              color: #bedaee;
              font-size: 0.6771vw;
              flex-direction: column;
              align-items: center;
              justify-content: center;
            }

            .green {
              color: #23c222;
            }

            .orange {
              color: #ff910f;
            }

            .red {
              color: #ff0f20;
            }

            .blue {
              color: #0ff1ff;
            }
          }

          .absolute1 {
            position: absolute;
            left: 1.5104vw;
            bottom: 26.7593vh;
          }

          .absolute2 {
            position: absolute;
            left: 1.5104vw;
            bottom: 9.4444vh;
          }

          .absolute3 {
            position: absolute;
            left: 13.8542vw;
            bottom: 1.8519vh;
          }

          .absolute4 {
            position: absolute;
            right: 25.0926vh;
            bottom: 1.8519vh;
          }

          .absolute5 {
            position: absolute;
            right: 1.5104vw;
            bottom: 8.8889vh;
          }

          .absolute6 {
            position: absolute;
            right: 1.5104vw;
            bottom: 26.7593vh;
          }
        }
      }

      .line-box {
        width: 100%;
        height: 23.7037vh; //420*256
      }
    }

    .right-box {
      margin-right: 1.0417vw;
      width: 21.875vw;

      .bar-box {
        height: 23.7963vh;
      }

      .rank-box {
        width: 100%;
        height: 23.7037vh; //420*256
        padding-top: 1.2963vh;

        .rank-ul-box {
          margin-left: 2.1875vw;

          .rank-li-box {
            display: flex;
            align-items: center;
            background: url("@/assets/images/energy/right/center/bg.png") no-repeat;
            background-size: auto 100%;
            margin-bottom: 0.8333vh;
            height: 1.3889vh;
            color: #fff;
            min-height: 11px;

            // justify-content: center;
            .rank-icon-box {
              width: 2.2917vw;
              height: 100%;

              img {
                height: 100%;
              }
            }

            .rank-name-box {
              font-size: 0.5208vw;
              margin-left: 2vw;
              width: 5vw;
              color: rgba(255, 255, 255, 0.9);
            }

            .rank-num-box {
              font-size: 0.625vw;
              color: #cfe3ff;
            }
          }
        }
      }

      .pie-box {
        width: 100%;
        height: 23.7037vh; //420*256
      }
    }
  }

  dt,
  dd,
  dl {
    padding: 0;
    margin: 0;
  }
}
</style>
